<template>
	<u-tabbar class="tabBarBox" :list="tabBarList" :active-color="activeColor" :inactive-color="inactiveColor"
		:value="value1" :placeholder="true" :safeAreaInsetBottom="true" @change="change">
		<u-tabbar-item v-for="(item, index) in tabBarList" :key="index" :text="item.text" :name="item.name"
			@click="changePath(item)">
			<image class="tabIcon" slot="active-icon" :src="item.selectedIconPath"></image>
			<image class="tabIcon" slot="inactive-icon" :src="item.iconPath"></image>
		</u-tabbar-item>
	</u-tabbar>
</template>

<script>
	import userPages from '@/utils/tabBar.js'

	export default {
		name: "tabbar",
		data() {
			return {
				value1: "home",
				tabBarList: [],
				inactiveColor: "#646566",
				activeColor: "#1989fa",
			};
		},

		mounted() {
			this.initTab()
		},

		methods: {
			initTab() {
				const tabBarType = uni.getStorageSync("tabBarType") || "1"
				this.tabBarList = userPages[tabBarType]

				var pages = getCurrentPages() // 获取栈实例
				let currentRoute = pages[pages.length - 1].route; // 获取当前页面路由

				const item = this.tabBarList.length && this.tabBarList.find(el => el.pagePath == currentRoute)

				if (item.name) {
					this.value1 = item.name
					this.inactiveColor = item.inactiveColor
					this.activeColor = item.activeColor
				}
			},

			change(name) {
				this.value = name
			},

			changePath(row) {
				uni.setStorageSync("tabBarType", row.tabBarType)
				console.log(row);
				if (row.tabBarType == 1) {
					uni.switchTab({
						url: "/" + row.pagePath
					})
				} else {
					uni.navigateTo({
						url: "/" + row.pagePath
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.tabBarBox {
		background-color: #fff;
	}

	.tabIcon {
		width: 40rpx;
		height: 40rpx;
	}
</style>